<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>分类</title>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/style.css"/>
      <script src="<%=path %>/statics/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">  
      
     function selectProduct(typeId){	
     $("#dl").html("");   	  
	  		$.ajax({	  								
    			url:"<%=path%>/type/getProductByTypeId",	
    			type:"GET",
    			data:{typeId:typeId},
    			dataType:"json",
    			success:function(topicList){
    				
					$(topicList).each(function(){										
						var $dd=$("<dd><a href='<%=path%>/product/detail/"+this.id+"'><img src='<%=path%>/statics/files/"+this.fileName+"' /><p>"+this.name+"</p></a></dd>");						
						$("#dl").append($dd);
				    });
			    }
    	  	}); 
    	  	 $.ajax({
    			url:"<%=path%>/type/getTypeById",	
    			type:"GET",
    			data:{typeId:typeId},
    			dataType:"json",
    			success:function(type){
    				$("#title").html("");	
    				$("#title").html(type.typeName);			
			    }
    	  	}); 	
    	};  	 
    $(function(){
	    $(".loading").addClass("loader-chanage")
		$(".loading").fadeOut(300);		
	selectProduct(1);
    });   	
    </script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
<body style="background-color: #fff;">
	<header class="page-header fixed-header">
		<input type="search"  /> 
		<span>
			<img src="<%=path%>/statics/images/serach.png"/>
		</span>
	</header>
	
	<div class="contaniner fixed-cont">
		<aside class="assort">
		<ul id="type">
		<c:if test="${typeList!=null}">
			<c:forEach items="${typeList }" var="type">
				<li class="active" value="${type.typeId}" onclick="selectProduct(${type.typeId})">
					<img src="<%=path %>/statics/images/${type.picture}"/>
					<span>${type.typeName}</span>
				</li>		
			</c:forEach>
		</c:if>									
			</ul>
		</aside>
		
		<section class="assort-cont">
			<figure>
				<a href="assort.html#">
					
				</a>
			</figure>
			
			<dl id="dl">
				<dt  id="title">母婴用品</dt>
				<%-- <dd>
					<a href="assort.html#">
						<img src="<%=path %>/statics/files/classify-ph02.png"/>
						<p>DNA</p>
					</a>
				</dd>	 --%>	
			
						
			</dl>			
		</section>
	</div>
	
	<footer class="page-footer fixed-footer">
		<ul>
			<li>
				<a href="<%=path %>/index.html">
					<img src="<%=path%>/statics/images/footer001.png"/>
					<p>首页</p>
				</a>
			</li>
			<li class="active">
				<a href="type/assort">
					<img src="<%=path%>/statics/images/footer02.png"/>
					<p>分类</p>
				</a>
			</li>
			<li>
				<a href="<%=path %>/trolley/sys/shopcar.html">
					<img src="<%=path%>/statics/images/footer003.png"/>
					<p>购物车</p>
				</a>
			</li>
			<li>
				<a href="<%=path%>/user/sys/self.html">
					<img src="<%=path%>/statics/images/footer004.png"/>
					<p>个人中心</p>
				</a>
			</li>
		</ul>
	</footer>
</body>
</html>